<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'unit.label', default: 'Unit')}" />
        <title>单元详情</title>
        %{--swiper.css--}%
        <asset:stylesheet src="intelligence/swiper.css"/>
    </head>
    <style type="text/css">
        a:hover, a:focus{
            color: rgba(33,150,243,1)!important;
        }
        a{
            cursor: pointer;
            color: rgba(33,150,243,1)!important;
        }

        /*表格*/
        /*.houseTable>tr:hover{*/
            /*background: #F7FBFF!important;*/
        /*}*/
        /*.table-bordered>tr:hover{*/
            /*background: #F7FBFF!important;*/
        /*}*/
    </style>
    <body>
    <div class="main1">
        <div class="width" style="margin: 0 auto;">
            <div class="buildingContent">
                <div class="pull-left unitContentPage_2"><asset:image src="detailImage_2.png" class="detailPageImage"/><span id="unitAddr"></span>${unit?.address?.fullName}</div>
            </div>
            <div class="mainBody">
                <!-- 轮播图 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <g:if test="${com.cindata.base.Picture.findAllByAddress(com.cindata.base.Address.findById(this.unit?.id))}">
                            <g:each in="${com.cindata.base.Picture.findAllByAddress(com.cindata.base.Address.findById(this.unit?.id))}">
                                <div class='swiper-slide'><image src='${it?.url}' class='swiperImg'/></div>
                            </g:each>
                        </g:if>
                        <g:else>
                            <image src='/assets/january.jpg' class='swiperImg' />
                        </g:else>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>

                <!-- 单元详情信息 -->

                <div class="houseDetailInformation">
                    <div class="detailBox_1 pull-left">


                        <div>单元名称：<span class="DetailColor">${unit?.unitName?:"--"}</span></div>
                        <div>单元名称：<span class="DetailColor">${unit?.unitName?:"--"}</span></div>
                        <div>总层数：<span class="DetailColor">${unit?.totalfloor?:"--"}</span></div>
                        <div>电梯数量：<span class="DetailColor">${unit?.elevatorCount?:"--"}</span></div>
                        <div>有无阁楼：<span class="DetailColor">${unit?.attic?:"--"}</span></div>


                    </div>

                    <div class="detailBox_3 pull-left">

                        <div>层户数：<span class="DetailColor">${unit?.housecountpreunit?:"--"}</span></div>
                        <div>地上层数：<span class="DetailColor">${unit?.groundFloor?:"--"}</span></div>
                        <div>朝向：<span class="DetailColor">${unit?.aspect?:"--"}</span></div>
                        <div>是否遮光：<span class="DetailColor">${unit?.sblocklight?:"--"}</span></div>
                    </div>

                </div>
            </div>

            <div class="clearfix"></div>
            <!-- 户号表 -->
            <div class="houseDealData_1">
                <div class="houseDealContent">
                    <ul class="plateData">
                        <li class="everyTitle">户号表</li>
                    </ul>
                </div>

                <div class="table-responsive">
                    <table class="table table-bordered  houseTable">

                    </table>
                </div>
            </div>
            <!-- 交易数据 -->
            <div class="houseDealData_1">
                <div class="houseDealContent">
                    <ul class="plateData">
                        <li class="everyTitle">交易数据</li>
                        <li class="tabActive houseDealContentActive">二手成交案例</li>
                        <li class="tabActive">一手成交案例</li>
                        <li class="tabActive">挂牌案例</li>
                        <li class="tabActive">法拍案例</li>
                        <li class="tabActive">出租案例</li>
                    </ul>
                </div>
                <table class="table table-hover mb-0 dealTable">
                    <thead class="tableFontColor">
                    <tr>
                        <th>小区名称</th>
                        <th>所在层</th>
                        <th>总楼层</th>
                        <th>朝向</th>
                        <th>建筑面积(㎡)</th>
                        <th>成交单价</th>
                        <th>成交总价</th>
                        <th>成交日期</th>
                    </tr>
                    </thead>
                    <tbody>

                    <g:if test="${saleUnitCount2==0}">
                        <tr><td colspan="8">暂无交易记录</td></tr>
                    </g:if>
                    <g:else>
                        <g:each in="${saleUnitList2}">
                            <tr>
                                <td scope="row">${it[0]}</td>
                                <td scope="row">${it[1]}</td>
                                <td scope="row">${it[2]}</td>
                                <td scope="row">${it[3]}</td>
                                <td scope="row">${it[4]}</td>
                                <td scope="row">${it[5]}</td>
                                <td scope="row">${it[6]}</td>
                                <td scope="row"><g:formatDate date="${it[7]}" format="yyyy-MM-dd"></g:formatDate></td>
                            </tr>
                        </g:each>
                    </g:else>

                    </tbody>
                </table>
                <table class="table table-hover mb-0 dealTable hide">
                    <thead class="tableFontColor">
                    <tr>
                        <th>小区名称</th>
                        <th>所在层</th>
                        <th>总楼层</th>
                        <th>朝向</th>
                        <th>建筑面积(㎡)</th>
                        <th>成交单价</th>
                        <th>成交总价</th>
                        <th>成交日期</th>
                    </tr>
                    </thead>
                    <tbody>

                    <g:if test="${saleUnitCount1==0}">
                        <tr><td colspan="8">暂无交易记录</td></tr>
                    </g:if>
                    <g:else>
                        <g:each in="${saleUnitList1}">
                            <tr>
                                <td scope="row">${it[0]}</td>
                                <td scope="row">${it[1]}</td>
                                <td scope="row">${it[2]}</td>
                                <td scope="row">${it[3]}</td>
                                <td scope="row">${it[4]}</td>
                                <td scope="row">${it[5]}</td>
                                <td scope="row">${it[6]}</td>
                                <td scope="row"><g:formatDate date="${it[7]}" format="yyyy-MM-dd"></g:formatDate></td>
                            </tr>
                        </g:each>
                    </g:else>

                    </tbody>
                </table>
                <table class="table table-hover mb-0 dealTable hide">
                    <thead class="tableFontColor">
                    <tr>
                        <th>小区名称</th>
                        <th>所在层</th>
                        <th>总楼层</th>
                        <th>朝向</th>

                        <th>建筑面积（ m2）</th>
                        <th>挂牌单价（元/ m2）</th>
                        <th>挂牌总价</th>

                        <th>挂牌日期</th>
                    </tr>
                    </thead>
                    <tbody>

                    <g:if test="${netListingCount==0}">
                        <tr><td colspan="8">暂无交易记录</td></tr>
                    </g:if>
                    <g:else>
                        <g:each in="${netListingList}">
                            <tr>
                                <td scope="row">${it[0]}</td>
                                <td scope="row">${it[1]}</td>
                                <td scope="row">${it[2]}</td>
                                <td scope="row">${it[3]}</td>
                                <td scope="row">${it[4]}</td>
                                <td scope="row">${it[5]}</td>
                                <td scope="row">${it[6]}</td>
                                <td scope="row"><g:formatDate date="${it[7]}" format="yyyy-MM-dd"></g:formatDate></td>
                            </tr>
                        </g:each>
                    </g:else>


                    </tbody>
                </table>
                <table class="table table-hover mb-0 dealTable hide">
                    <thead class="tableFontColor">
                    <tr>
                        <th>小区名称</th>
                        <th>楼层</th>
                        <th>朝向</th>
                        <th>建筑面积㎡</th>
                        <th>法拍次数</th>

                        <th>评估单价（元/ m2）</th>
                        <th>成交单价（元/ m2）</th>
                        <th>成交总价</th>

                        <th>成交日期</th>
                    </tr>
                    </thead>
                    <tbody>

                    <g:if test="${foreclosureCount==0}">
                        <tr><td colspan="9">暂无交易记录</td></tr>
                    </g:if>
                    <g:else>
                        <g:each in="${foreclosureList}">
                            <tr>
                                <td scope="row">${it[0]}</td>
                                <td scope="row">${it[1]}</td>
                                <td scope="row">${it[2]}</td>
                                <td scope="row">${it[3]}</td>
                                <td scope="row">${it[4]}</td>
                                <td scope="row">${it[5]}</td>
                                <td scope="row">${it[6]}</td>
                                <td scope="row">${it[7]}</td>
                                <td scope="row"><g:formatDate date="${it[8]}" format="yyyy-MM-dd"></g:formatDate></td>
                            </tr>
                        </g:each>
                    </g:else>


                    </tbody>
                </table>
                <table class="table table-hover mb-0 dealTable hide">
                    <thead class="tableFontColor">
                    <tr>
                        <th>小区名称</th>
                        <th>所在层</th>
                        <th>总楼层</th>
                        <th>出租面积(㎡)</th>
                        <th>房型</th>
                        <th>出租价格(元/月)</th>
                        <th>租赁方式</th>
                        <th>装修</th>
                        <th>发布日期</th>
                    </tr>
                    </thead>
                    <tbody>

                    <g:if test="${rentCount==0}">
                        <tr><td colspan="9">暂无交易记录</td></tr>
                    </g:if>
                    <g:else>
                        <g:each in="${rentList}">
                            <tr>
                                <td scope="row">${it[0]}</td>
                                <td scope="row">${it[1]}</td>
                                <td scope="row">${it[2]}</td>
                                <td scope="row">${it[3]}</td>
                                <td scope="row">${it[4]}</td>
                                <td scope="row">${it[5]}</td>
                                <td scope="row">${it[6]}</td>
                                <td scope="row">${it[7]}</td>
                                <td scope="row"><g:formatDate date="${it[8]}" format="yyyy-MM-dd"></g:formatDate></td>

                            </tr>
                        </g:each>
                    </g:else>

                    </tbody>
                </table>
            </div>
        </div>
            %{--footer--}%
            <footer class="footerText">
                <section class="serverPhone">客服电话：400-077-0101</section>
                <section class="companyName">2017 © 北京国信达数据技术有限公司</section>
            </footer>
    </div>
            %{--swiper.js--}%
            <asset:javascript src="intelligence/swiper.js"/>
            %{--初始化swiper.js--}%
            <script>
                var swiper = new Swiper('.swiper-container',{
                    loop:true,
                    autoplay:1000,
                    slidesPerView: 1,
                    spaceBetween: 30,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });
            </script>
            <script>

                // 小区交易数据 houseDealContentActive切换
                $(".tabActive").click(function(){
                    $(this).addClass("houseDealContentActive").siblings().removeClass("houseDealContentActive");
                    var index = $(".tabActive").index(this)
                    $(".dealTable").each(function () {
                        if ($(".dealTable").index(this) == index)
                        {
                            if ($(this).hasClass("hide"))
                            {
                                $(this).removeClass("hide")
                            }

                        }
                        else {
                            if (!$(this).hasClass("hide"))
                            {
                                $(this).addClass("hide")
                            }
                        }
                    })
                })

                $(function () {
                    // 分页器样式
                    $(".pagings>a,.pagings>span").addClass("btn btn-secondary waves-effect");
                    // 当前分页
                    $(".currentStep").css({"background": "#2196F3", "color": "#fff", "border-color": "#2196F3"});

                    $.ajax({
                        type: "post",
                        url: "/unit/unitTable",
                        data: {unitId: ${unit?.id},buildingId:${unit?.building?.id}},
                        success: function (data) {
                            if (data.status == "success") {

                             var unitTableList=data.unitTableList

                                var length=unitTableList.length
                                var totalFloor=${unit?.totalfloor}
                                if(length==0){
                                    $(".dataTable").html("暂无数据")
                                }else {
                                    var htm="<tr class='tableFontColor'><td class='fixWidth'>楼层</td><td colspan='99' style='text-align: center'>户</td></tr>"
                                    for(var j=0;j<totalFloor;j++){
                                        htm+="<tr><td class='tableFontColor fixWidth'>"+(j+1)+"层</td>"
                                        for (var i = 0; i < length; i++) {
                                                    if(unitTableList[i][2]==(j+1)){
                                                        htm+="<td><a href='/house/show?id="+unitTableList[i][0]+" &&communityId=${unit?.community.id} ' class=\'pageColor\'>"+unitTableList[i][1]+"</a></td>"
                                                    }
                                            }
                                        }
                                        htm+="</tr>"
                                    }
                                    htm+= "</tr>"
                                    $(".houseTable").html(htm)
                                }
                        },
                        error: function () {
                            alert("获取失败，请稍后重试");
                        }
                    });


                })
            </script>

    </body>
</html>
